<template>
  <div class="detailInfo">
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="status">
      <span v-if="orderDetail.status === 0" class="txt">待审核</span>
      <span v-if="orderDetail.status === 1" class="txt">待财务审核</span>
      <span v-if="orderDetail.status === 2" class="txt">待出库审核</span>
      <span v-if="orderDetail.status === 3" class="txt">待发货</span>
      <span v-if="orderDetail.status === 4" class="txt">待买家确认收货</span>
      <span v-if="orderDetail.status === 5" class="txt">已完结</span>
      <span v-if="orderDetail.status === 6" class="txt">已作废</span>
      <a class="btn fr" v-if="orderDetail.status === 5 && orderDetail.is_refund === 1" @click="goToRefund">申请售后</a>
    </div>
    <div class="order">
      <div class="title">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">订单号：</span>
        <span class="title-sn">{{ orderDetail.order_sn }}</span>
        <a class="btn" @click="handleClipboard(orderDetail.order_sn, $event)">复制</a>
      </div>
    </div>
    <div class="address">
      <div class="icon"><svg-icon icon-class="icon_address" /></div>
      <div class="address-info">
        <span class="txt1">{{ orderDetail.address_name }}  {{ orderDetail.address_mobile }}</span>
        <div class="txt2">{{ orderDetail.address_address }}</div>
      </div>
    </div>
    <div class="goods">
      <tpl-goods-slide ref="goodsListBox" :item-list="orderDetail.item_list"/>
    </div>
    <div class="action">

      <div class="remark">
        <div class="remark1">
          <svg-icon class="icon" icon-class="icon_edit"/>
          <span v-if="remarkStatus" class="remark2" @click="remarkStatus = false">{{ orderDetail.remark? orderDetail.remark: '订单备注' }}</span>
          <div v-if="!remarkStatus" class="input">
            <textarea v-model="remark" type="textarea" @blur="editRemark"/>
          </div>
        </div>
        <!--<input v-model="orderDetail.remark" class="input" type="text" placeholder="备注信息">-->
      </div>
    </div>
    <div class="order action" v-if="orderDetail.deliver_type">
      <div class="action-record">
        <svg-icon class="icon" icon-class="icon_action" />
        <span class="txt">配送方式</span>
        <span class="fr" v-if="orderDetail.deliver_type === 1">上门自取</span>
        <span class="fr" v-if="orderDetail.deliver_type === 2">送货上门</span>
        <span class="fr" v-if="orderDetail.deliver_type === 3">快递</span>
      </div>
    </div>
    <div class="order action" v-if="orderDetail.deliver_time">
      <div class="action-record">
        <svg-icon class="icon" icon-class="icon_action" />
        <span class="txt">交货时间</span>
        <span class="fr">{{orderDetail.deliver_time}}</span>
      </div>
    </div>
    <div class="order action" v-if="orderDetail.invoice_type !== 0">
      <div class="action-record">
        <svg-icon class="icon" icon-class="icon_action" />
        <span class="txt">发票信息</span>
        <i class="fr van-icon van-icon-arrow"/>
      </div>
      <div class="content">
        <div class="inline fontS">
          <span style="color: #666;">发票类型：</span><span>{{orderDetail.invoice_type == 1?'普通增值税发票('+(parseFloat(orderDetail.invoice_rate) * 100).toFixed(2)+'%)':'专用增值税发票('+(parseFloat(orderDetail.invoice_rate) * 100).toFixed(2)+'%)'}}</span><br>
          <span style="color: #666;">发票抬头：</span><span>{{orderDetail.invoice_title}}</span><br>
          <span style="color: #666;">纳税人识别码：</span><span>{{orderDetail.invoice_code}}</span><br>
          <span style="color: #666;">发票内容：</span><span>{{orderDetail.invoice_info}}</span>
        </div>
        <div v-if="orderDetail.invoice_type == 2" class="inline fontS">
          <span style="color: #666;">开户名称：</span><span>{{orderDetail.bank_account_name}}</span><br>
          <span style="color: #666;">开户银行：</span><span>{{orderDetail.bank_name}}</span><br>
          <span style="color: #666;">银行账号：</span><span>{{orderDetail.bank_code}}</span><br>
          <span style="color: #666;">电话：</span><span>{{orderDetail.invoice_phone}}</span><br>
          <span style="color: #666;">地址：</span><span>{{orderDetail.invoice_address}}</span>
        </div>
      </div>
    </div>
    <div class="order action">
      <div class="action-record" @click="showActiveLog = !showActiveLog">
        <svg-icon class="icon" icon-class="icon_action" />
        <span class="txt">操作日志</span>
        <i class="fr van-icon van-icon-arrow" :style="showActiveLog?{transform: 'rotateZ(90deg)'}:{}"/>
      </div>
      <div class="content" v-if="showActiveLog">
        <div v-for="item in orderDetail.action_log" :key="item.order_log_id" class="inline">
          <span>{{ item.action_type }}</span><span class="fr">{{ item.created_at }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetOrderDetail, editOrderRemark } from '@/api/order'
import tplGoodsSlide from '../../components/tplGoodsSlide'
import clipboard from '@/utils/clipboard'
// import { setMiniChat } from '@/utils/miniChat'

export default {
  name: 'Index',
  components: {
    tplGoodsSlide
  },
  data() {
    return {
      loading: false,
      orderDetail: {},
      remark: '',
      remarkStatus: true,
      showActiveLog: false
    }
  },
  created() {
    this.GetOrderDetailFn()
  },
  methods: {
    // 申请售后
    goToRefund() {
      this.$router.push({
        name: 'refund-add',
        query: {
          id: this.$route.query.id
        }
      })
    },
    // 修改订单备注
    editRemark() {
      const formData = {
        order_id: this.$route.query.id,
        remark: this.remark
      }
      editOrderRemark(formData).then(res => {
        this.remarkStatus = true
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            duration: 1500,
            message: data.message
          })
          this.GetOrderDetailFn()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 获取订单详情
    GetOrderDetailFn() {
      this.loading = true
      const formData = {
        order_id: this.$route.query.id
      }
      GetOrderDetail(formData).then(res => {
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          this.orderDetail = data.data
          this.$emit('detailData', data.data)
          this.$refs.goodsListBox.invoice = {
            value: this.orderDetail.invoice_type,
            i: 0
          }
          console.log('this.orderDetail=', this.orderDetail)
          // const dataInfo = {
          //   type: 2,
          //   // eslint-disable-next-line
          //   orderinfo: {
          //     data: {
          //       number: this.orderDetail.order_sn, // 订单编号
          //       express: '', // 订单快递单号
          //       datetime: this.orderDetail.create_time, // 订单创建时间
          //       status: this.orderDetail.status, // 订单状态
          //       total_price: this.orderDetail.total_fee, // 订单总价
          //       goods: [ // 请以数组方式传输商品
          //         {
          //           imgurl: '', // 商品图片
          //           link: '', // 商品链接地址
          //           title: '', // 商品标题
          //           price: '' // 商品价格
          //         }
          //       ]
          //     }
          //   }
          // }
          // setMiniChat(dataInfo)
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 复制功能
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .detailInfo{
    .status{
      background: #fff;
      height: pxCalc(50px);
      line-height: pxCalc(50px);
      border-bottom: pxCalc(1px) solid #f5f5f5;
      padding-left: pxCalc(20px);
      font-size: pxCalc(14px);
      font-weight: bold;
      .btn{
        border: pxCalc(1px) solid #e5e5e5;
        line-height: pxCalc(23px);
        padding:0 pxCalc(12px);
        display: inline-block;
        font-size: pxCalc(12px);
        color: #363b43;
        font-weight: normal;
        margin-top: pxCalc(12px);
        border-radius: pxCalc(3px);
        margin-right: pxCalc(10px);
        &:active{
          background: #f5f5f5;
        }
      }
      .txt{
        color: #ff9600;
      }
    }
    .goods{
      padding-left: pxCalc(20px);
      background: #fff;
    }
    .address{
      background: #fff;
      padding: pxCalc(15px) 0 pxCalc(13px) pxCalc(20px);
      border-bottom: pxCalc(1px) solid #f5f5f5;
      margin-bottom: pxCalc(5px);
      .icon{
        font-size: pxCalc(22px);
        display: inline-block;
        vertical-align: pxCalc(13px);
        margin-right: pxCalc(5px);
      }
      &-info{
        display: inline-block;
        .txt1{
          font-size: pxCalc(15px);
          color: #363b43;
        }
        .txt2{
          font-size: pxCalc(14px);
          color: #999999;
          width: pxCalc(300px);
          @include showEllipsis;
        }
      }
    }
    .action{
      background: #fff;
      padding-left:pxCalc(20px);
      margin-bottom: pxCalc(5px);
      .icon{
        color: #9e9e9e;
        font-size: pxCalc(14px);
        margin-right: pxCalc(8px);
        vertical-align: pxCalc(-3px);
      }
      &-record{
        border-bottom: pxCalc(1px) solid #f5f5f5;
        padding: pxCalc(14px) pxCalc(20px) pxCalc(14px) 0;
        .txt{
          font-size: pxCalc(14px);
          color: #363b43;
        }
        .van-icon{
          margin-top: pxCalc(3px);
          font-size: pxCalc(14px);
          color: #b1b1b1;
        }
      }
      .remark{
        padding: pxCalc(14px) pxCalc(20px) pxCalc(14px) 0;
        .remark1{
          font-size: pxCalc(14px);
        }
        .remark2{
          font-size: pxCalc(13px);
          text-indent: 2em;
          color: #a1a1a1;
        }
        .input{
          display: inline-block;
          vertical-align: top;
          border: 1px solid #ddd;
          padding: pxCalc(5px);
          width: 90%;
          border-radius: pxCalc(4px);
          textarea{
            border: none;
          }
        }
      }
    }
    .order{
      padding-left: pxCalc(20px);
      background: #fff;
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        .icon{
          width: pxCalc(17px);
          display: inline-block;
          vertical-align: pxCalc(-4px);
          margin-right: pxCalc(6px);
          margin-left: pxCalc(3px);
          img{
            width: 100%;
          }
        }
        &-sn{
          color: #363b43;
        }
        .order-sn{
          color: #999999;
          font-size: pxCalc(13px);
        }
        .btn{
          border: pxCalc(1px) solid #e5e5e5;
          line-height: pxCalc(23px);
          padding:0 pxCalc(12px);
          display: inline-block;
          font-size: pxCalc(12px);
          color: #363b43;
          border-radius: pxCalc(3px);
          margin-left: pxCalc(4px);
          &:active{
            background: #f5f5f5;
          }
        }
      }
      .content{
        padding: pxCalc(12px) 0;
        .inline{
          padding-right: pxCalc(20px);
          line-height: pxCalc(30px);
          font-size: pxCalc(13px);
          color: #999999;
        }
        .fontS{
          font-size: pxCalc(12px);
        }
      }
    }
  }
</style>
